<template>
  <div class="operationPage">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="型号搜索：">
        <el-input v-model="innerCode" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
      </el-form-item>
    </el-form>

    <div class="table">
      <el-row>
        <el-button
          icon="el-icon-circle-plus-outline"
          class="add"
          type="primary"
          @click="addshebeileixing"
        >新建</el-button>
      </el-row>
      <el-table :border="false" :data="vmTypeList" style="width: 100%">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column prop="name" label="型号名称" width="180" />
        <el-table-column prop="model" label="型号编码" width="180" />
        <el-table-column
          prop="image"
          label="设备图片"
          width="180"
        ><template
          v-slot="{ row }"
        ><img
          style="width: 25px"
          onerror="this.src = defaultImage"
          :src="row.image"
          alt=""
        ></template></el-table-column>
        <el-table-column prop="vmRow" label="货道行" width="180" />
        <el-table-column prop="vmCol" label="货道列" />
        <el-table-column prop="channelMaxCapacity" label="设备容量" />
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              @click="changeShebeileixing(row)"
            >修改</el-button>
            <el-button
              class="del"
              style="color: red"
              size="mini"
              type="text"
              @click="deleteshebeileixing(row)"
            >删除</el-button>
          </template></el-table-column>
      </el-table>
    </div>
    <!-- 新建弹层 -->
    <el-dialog
      title="新增工单"
      :visible.sync="isShowDialog"
      width="40%"
      class="dialog"
    >
      <el-form ref="addForm" label-width="120px" class="addDialog">
        <el-form-item prop="innerCode" label="设备编号:">
          <el-input
            v-model="addValue.innerCode"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
            style="width: 80%"
            @input="shebeibianhao"
          />
        </el-form-item>
        <el-form-item prop="productType" label="工单类型:">
          <el-select
            v-model="addValue.productType"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in gongdanList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="运维人员:">
          <el-select
            v-model="addValue.userId"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in yunweirenyuan"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            v-model="addValue.desc"
            placeholder="请输入备注(不超过40字)"
            maxlength="40"
            show-word-limit
            type="textarea"
            :rows="4"
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button @click="isShowDialog = false">取消</el-button>
              <el-button class="enter" @click="addGongdan">确定</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹层 -->
    <el-dialog
      width="40%"
      class="gongdanDetail"
      :visible.sync="xiugaiDialog"
      center
      @close="close"
    >
      <template #title><span class="title">修改设备类型</span></template>
      <el-form
        ref="xiugaiForm"
        label-width="120px"
        :model="xiugaiForm"
        :rules="rules"
      >
        <el-form-item prop="name" label="型号名称">
          <el-input
            v-model="xiugaiForm.name"
            type="text"
            placeholder="请输入内容"
            maxlength="10"
            show-word-limit
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item prop="model" label="货道编码">
          <el-input
            v-model="xiugaiForm.model"
            type="text"
            placeholder="请输入内容"
            maxlength="15"
            show-word-limit
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item prop="vmRow" label="货道行数">
          <el-input-number
            v-model="xiugaiForm.vmRow"
            style="width: 80%"
            controls-position="right"
            :min="1"
            :max="10"
          />
        </el-form-item>
        <el-form-item prop="vmCol" label="货道列数">
          <el-input-number
            v-model="xiugaiForm.vmCol"
            style="width: 80%"
            controls-position="right"
            :min="1"
            :max="10"
          />
        </el-form-item>
        <el-form-item prop="channelMaxCapacity" label="货道容量">
          <el-input-number
            v-model="xiugaiForm.channelMaxCapacity"
            style="width: 80%"
            controls-position="right"
            :min="1"
            :max="10"
          />
        </el-form-item>
        <el-form-item prop="image" label="设备图片">
          <image-upload v-model="xiugaiForm.image" />
          支持扩展名：jpg、png,文件不得大于100kb
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button @click="close">取消</el-button>
              <el-button class="enter" @click="xiugaiEnter">确定</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import ImageUpload from '@/views/vm/components/image-upload.vue'
import { search, getvmTypeList, addshouhuojileixing, putshouhuojileixing, deleteshebeileixing } from '@/api/vm'
import {
  getOperation,
  getzhuangtaiList,
  addOperation,
  getYunWeiRen,
  getGongdanList,
  getGongdanDesc,
  getGongdanquxiao
} from '@/api/task'
export default {
  name: 'Operation',
  components: {
    ImageUpload
  },
  data() {
    return {
      // 搜索
      innerCode: '',
      // 确认按钮执行
      enter: '',
      // 弹层
      xiugaiDialog: false,
      // 表单
      xiugaiForm: {
        name: '',
        model: '',
        vmRow: null,
        vmCol: null,
        channelMaxCapacity: null,
        image: '',
        typeId: null
      },
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'change' }],
        model: [{ message: '请输入', trigger: 'change', required: true }]
      },
      text: '',
      num: null,
      pageIndex: 1,
      pageSize: 10,
      vmTypeList: [],
      // 搜索
      taskCode: '',
      statusName: null,
      // 状态列表
      zhuangtaiList: [],
      // 查看详情弹层
      outerVisible: false,
      innerVisible: false,
      xiangqingList: [],
      gongdanLeixing: '',
      gongdanzhaungtai: '',
      list: [],
      totalCount: null,
      totalPage: '',
      isRepair: true,
      isShowDialog: false,
      addValue: {
        // 创建类型
        createType: 1,
        // 设备编号
        innerCode: '',
        // 执行人id
        userId: null,
        // 工单类型
        productType: null,
        // 描述信息
        desc: '',
        // 防止数据发布不成功
        assignorId: null
      },
      // 运维人员
      yunweirenyuan: [],
      // 工单类型
      gongdanList: []
    }
  },
  created() {
    // ⭐
    this.getvmTypeList()
    // ⭐
    this.getyunyingList()
    // 状态列表
    this.getzhuangtaiList()
  },
  methods: {
    // ⭐
    // 搜索
    async search() {
      const res = await search(this.innerCode)
      this.vmTypeList = res.currentPageRecords
      console.log(this.vmTypeList)
    },
    // 新建
    async addshebeileixing() {
      this.xiugaiDialog = true
      this.enter = 'xinjian'
    },
    // 删除
    async deleteshebeileixing(row) {
      try {
        await deleteshebeileixing(row.typeId)
        this.$message.success({
          message: '删除设备类型成功',
          offset: 90
        })
        this.getvmTypeList()
      } catch (error) {
        this.$message.warning({
          message: error.response.data,
          offset: 90
        })
      }
    },
    // 关弹层
    close() {
      this.xiugaiDialog = false
      this.$refs.xiugaiForm.resetFields()
      this.xiugaiForm = {}
    },
    // 弹层确认
    async xiugaiEnter() {
      await this.$refs.xiugaiForm.validate()
      if (this.enter === 'xiugai') {
        try {
          await putshouhuojileixing(this.xiugaiForm)
          this.$message.success({
            message: '修改售货机类型成功',
            offset: 90
          })
          this.getvmTypeList()
          this.xiugaiDialog = false
        } catch (error) {
        // console.dir(error)
          this.$message.warning({
            message: error.response.data,
            offset: 90
          })
        }
      } else if (this.enter === 'xinjian') {
        try {
          await addshouhuojileixing(this.xiugaiForm)
          this.$message.success({
            message: '新增设备类型成功',
            offset: 90
          })
          this.getvmTypeList()
          this.xiugaiDialog = false
          this.$refs.xiugaiForm.resetFields()
        } catch (error) {
          this.$message.warning({
            message: error.response.data,
            offset: 90
          })
        }
      }
    },
    // 修改
    changeShebeileixing(row) {
      this.xiugaiDialog = true
      this.xiugaiForm = JSON.parse(JSON.stringify(row))
      console.log(this.xiugaiForm)
      this.enter = 'xiugai'
    },
    async getvmTypeList() {
      const res = await getvmTypeList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
      console.log(res)
      this.vmTypeList = res.currentPageRecords
    },
    // ⭐
    // 状态列表
    async getzhuangtaiList() {
      const res = await getzhuangtaiList()
      this.zhuangtaiList = res
      console.log(this.zhuangtaiList)
    },
    async getyunyingList() {
      // 获取运营工单数据列表A
      const res = await getOperation({
        pageIndex: this.pageIndex,
        pageSize: 10,
        isRepair: true
      })
      console.log(res)
      this.list = res.currentPageRecords.map((item) => {
        item.createTime = item.createTime.replace('T', ' ')
        item.updateTime = item.updateTime.replace('T', ' ')
        return item
      })
      console.log(this.list)
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    async onSubmit() {
      const obj = {
        taskCode: this.taskCode,
        pageIndex: this.pageIndex,
        pageSize: 10,
        isRepair: true,
        status: this.statusName
      }
      const res = await getOperation(obj)
      console.log(res)
      this.list = res.currentPageRecords.map((item) => {
        item.createTime = item.createTime.replace('T', ' ')
        item.updateTime = item.updateTime.replace('T', ' ')
        return item
      })
      console.log(this.list)
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    // 新建弹层
    async addItem() {
      this.getGongdanList1()

      this.isShowDialog = true
    },
    async shebeibianhao() {
      if (this.addValue.innerCode) {
        const res = await getYunWeiRen(this.addValue.innerCode)
        this.yunweirenyuan = res
      }
    },
    // 获取工单类型
    async getGongdanList1() {
      const res = await getGongdanList()
      this.gongdanList = res.filter((item) => item.type === 1)
      console.log(this.gongdanList)
    },
    // 添加工单
    async addGongdan() {
      this.addValue.assignorId = this.addValue.userId
      const res = await addOperation(this.addValue)
      if (res) {
        this.isShowDialog = false
        this.$refs.addForm.resetFields()
        this.getyunyingList()
        this.$message.success({
          message: '创建工单成功',
          offset: 90
        })
        this.addValue = {}
      } else {
        this.isShowDialog = false
      }
      this.yunweirenyuan = []
    },
    // 工单详情
    async getGongdanDesc(row) {
      this.outerVisible = true
      const obj = {
        // taskName: '运维工单',
        createType: 1,
        innerCode: row.innerCode,
        userId: row.userId,
        assignorId: row.assignorId,
        productType: row.taskType.taskType,
        desc: row.desc
      }
      const res = await getGongdanDesc(row.taskId, obj)
      // console.log(res)
      this.xiangqingList = res
      this.gongdanLeixing = this.xiangqingList.taskType.typeName
      this.gongdanzhaungtai =
        this.xiangqingList.taskStatusTypeEntity.statusName
    },
    // 取消工单
    async getGongdanquxiao() {
      const obj = {
        taskId: this.xiangqingList.taskId,
        desc: this.xiangqingList.desc
      }
      await getGongdanquxiao(this.xiangqingList.taskId, obj)
      this.innerVisible = false
      this.outerVisible = false
      this.getyunyingList()
      this.$message.success({
        message: '取消工单成功',
        offset: 90
      })
    },
    // 重新创建
    addChongxin() {
      this.shebeibianhao()
      this.outerVisible = false
      this.isShowDialog = true
      this.addValue = this.xiangqingList
      this.addValue.productType = this.gongdanLeixing
    }
  }
}
</script>
<style lang="scss">
.el-dialog {
  border-radius: 10px;
}
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
</style>

<style lang="scss" scoped>
.neiceng {
  margin-top: 250px;
}
.gongdanDetail {
  display: flex;
  flex-direction: column;
  .txt {
    // background-color: #1554b4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      margin-top: 20px;
    }
  }
  .pic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    height: 70px;
    line-height: 70px;
    .naozhong {
      img {
        margin-top: 35px;
        padding-left: 15px;
      }
    }
    .tou {
      position: relative;
      left: -250px;
      top: 3px;
    }
  }
  .el-button {
    background-color: #fdf6ec;
    border: 0;
  }
  .title {
    float: left;
  }
}

::v-deep .operationPage {
  font-size: 28px;
}
.demo-form-inline {
  background-color: #fff;
  height: 64px;
  display: flex;
  .el-form-item {
    margin-top: 13px;
    margin-left: 13px;
    .el-button {
      background-color: #5f84ff;
    }
    .del {
      color: red !important;
    }
  }
}
.table {
  margin-top: 26px;
  background-color: #fff;
  padding-left: 13px;
  padding-top: 20px;
  .add {
    color: #fff;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
  }
  .peizhi {
    color: #655b56;
  }
  .el-table {
    // background-color: #1554b4;
  }
}
.has-gutter {
  background-color: rgb(11, 95, 231);
}
::v-deep .btn-prev {
  width: 70px;
  height: 32px;
  background-color: #d5ddf8;
  border-radius: 2px;
}
::v-deep .btn-next {
  width: 70px;
  height: 32px;
  background-color: #d5ddf8;
  border-radius: 2px;
  margin-left: 15px;
}
.pagination-container {
  height: 100px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 100px;
}
::v-deep .pageText {
  font-size: 18px;
  color: #dbdfe5;
  margin-left: 15px;
}
::v-deep .enter {
  color: #fff;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: 0;
}
</style>
